// base
import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
// redux
import { connect } from '@tarojs/redux'
import { DOREQUESTCHOOSEJOBAREA } from './store/actions/pagechoosejobarea'
import { UPDATEPAGECHOOSEJOBAREA } from './store/types/pagechoosejobarea'
import { UPDATELANDMARK } from '../../store/types/landmark'
import { UPDATEBASEUSERINFO } from '../../store/types/baseuserinfo'
// less
import './index.less'

// componnet
import BtmFixedBtn from '../../components/page-components/btm-fixed-btn'
import { navigateTo, navigateBack, redirectTo } from '../../crossplatform/apiservice/navigate'
import { showToast } from '../../crossplatform/apiservice/toast'
import { UPDATEPAGEEDITJOBINTENTION } from '../edit-job-intention/store/types/pageeditjobintention'
import pagejumplist from '../../configuration/pagejumplist.json'

const mapActiontoProps = dispatch => ({
  updateState(payload) {
    dispatch({
      type: UPDATEPAGECHOOSEJOBAREA,
      payload: {
        ...payload
      }
    })
  },
  updateEditJobIntentionState(payload) {
    dispatch({
      type: UPDATEPAGEEDITJOBINTENTION,
      payload: {
        ...payload
      }
    })
  },
  dorequest(cityName) {
    let promise = DOREQUESTCHOOSEJOBAREA(cityName)
    dispatch(promise)
  },
  updateLandmark(payload) {
    dispatch({
      type: UPDATELANDMARK,
      payload: {
        ...payload
      }
    })
  },
  updateBaseUserState(payload) {
    dispatch({
      type: UPDATEBASEUSERINFO,
      payload: {
        ...payload
      }
    })
  }
})

@connect(
  ({ pagechoosejobarea, landmark, pageeditjobintention, baseuserinfo }) => ({
    ...pagechoosejobarea,
    baseuserinfo,
    landmarkName: landmark.landmarkName,
    jobCity: pageeditjobintention.jobCity,
    workPlace: pageeditjobintention.workPlace,
    areaList: pagechoosejobarea.areaList
  }),
  mapActiontoProps
)
class ChooseJobArea extends Component {
  config = {
    navigationBarTitleText: '求职意向'
  }

  constructor(props) {
    super(props)
    this.state = {
      chosedState: props.workPlace.filter(e => e),
      selectJobCity: props.jobCity || props.landmarkName,
      isBaseInfo: ''
    }
  }

  componentWillMount() {
    // onLoad
  }

  componentDidMount() {
    // onready
  }

  componentDidShow() {
    // onshow
    if (this.selectJobCity) {
      if (this.selectJobCity !== this.props.landmarkName) {
        this.setState(
          {
            chosedState: [],
            selectJobCity: this.props.landmarkName
          },
          () => {
            this.queryWrap(this.state.selectJobCity)
          }
        )
        this.props.updateEditJobIntentionState({
          workPlace: []
        })
      } else {
      }
    } else {
      this.queryWrap(this.state.selectJobCity)
    }
  }

  componentDidUpdate() {}

  componentDidHide() {
    // onhide
    this.selectJobCity = this.state.selectJobCity
  }

  componentWillUnmount() {
    // onUnload
  }

  queryWrap = cityName => {
    // 页面初始化
    this.getAreListByCityName(cityName)

    // 判断是否是基本信息进入
    const { isBaseInfo } = this.$router.params
    this.setState({
      isBaseInfo
    })
  }

  getAreListByCityName = cityName => {
    const { dorequest } = this.props
    dorequest(cityName)
  }
  goto = () => {
    navigateTo({
      url: pagejumplist['city-location'].path
    })
  }

  deleteCity = (index, item) => {
    // 点击删除城市按钮
    const { chosedState } = this.state
    this.setState({
      chosedState: chosedState.filter(e => e !== item)
    })
  }

  onClickArea = (index, item) => {
    // 点击选择区域
    let { chosedState } = this.state
    // 增加选择的区域
    if (chosedState.length >= 3) {
      if (chosedState.includes(item)) {
        chosedState = chosedState.filter(e => e !== item)
      } else {
        showToast({
          title: '最多只能选三个哦'
        })
      }
    } else {
      if (!chosedState.includes(item)) {
        chosedState = [...chosedState, item]
      } else {
        chosedState = chosedState.filter(e => e !== item)
      }
    }
    this.setState({
      chosedState
    })
  }

  comfirm = () => {
    const { chosedState, isBaseInfo } = this.state
    const { updateEditJobIntentionState, baseuserinfo } = this.props
    if (chosedState.length <= 0) {
      showToast({
        title: '请至少选择一个区域'
      })
    } else {
      if (isBaseInfo) {
        // 从基本信息进入页面
        const { userInfoC } = baseuserinfo
        let jobIntention = { ...userInfoC.jobIntention }
        jobIntention.workPlace = [...chosedState]
        jobIntention.jobCity = this.state.selectJobCity
        this.props.updateBaseUserState({
          userInfoC: {
            ...userInfoC,
            jobIntention
          }
        })
        let type = 0 // 0-兼职 1-全职 2-实习
        switch (jobIntention.workNature && jobIntention.workNature[0]) {
          case '兼职':
            type = 0
            break
          case '全职':
            type = 1
            break
          case '实习':
            type = 2
            break
          default:
            type = 0
            break
        }
        // 跳转到期望职位页面
        redirectTo({
          url: `${pagejumplist['choose-desire-job'].path}?isBaseInfo=${isBaseInfo}&type=${type}`
        })
      } else {
        updateEditJobIntentionState({
          workPlace: [...chosedState],
          jobCity: this.state.selectJobCity
        })
        navigateBack()
      }
    }
  }

  render() {
    const { areaList } = this.props
    const { chosedState, selectJobCity, isBaseInfo } = this.state
    return (
      <View className="ChooseJobArea_id87040">
        <View className="top-title">
          <View className="title">
            <View className="title-text">工作区域</View>
            {/* <View className="title-btn" onClick={this.getSubmitData}>保存</View> */}
          </View>
          <View className="desc">*快来选择你想要工作的区域吧，可选3个哦！</View>

          <View className="chosed-city-list">
            {chosedState.map((item, index) => {
              return (
                <View className="chosed-city-item" key={index}>
                  <View className="item-text">{item}</View>
                  <View className="item-closed" onClick={this.deleteCity.bind(this, index, item)}>
                    <Image
                      className="item-closed-img"
                      src="https://imagesize.hrwork.com/sp/files/661a184f-c34b-448d-bac9-c02972b1a48d.png"
                    />
                  </View>
                </View>
              )
            })}
          </View>

          <View class="top-container">
            <View className="box-wrap" onClick={this.goto}>
              <View className="text-wrap">{selectJobCity}</View>
              <Image
                className="trans-bt"
                src="https://imagesize.hrwork.com/sp/files/f1b641a7-7e77-4489-9a7c-a35ce360e026.png"
              />
            </View>
            <View className="box-search" onClick={this.search} />
          </View>

          <View className="area-list">
            {areaList.map((item, index) => {
              return (
                <View
                  key={index}
                  className={`area-list-item ${chosedState.includes(item) ? 'active' : ''}`}
                  onClick={this.onClickArea.bind(this, index, item)}
                >
                  <View className="area-list-item-text">{item}</View>
                </View>
              )
            })}
          </View>

          <BtmFixedBtn text={isBaseInfo ? '下一步' : '完成'} onTap={this.comfirm} />
        </View>
      </View>
    )
  }
}

export default ChooseJobArea
